<template>
    <div class="wrapper">
        <div class="paper">
            <span>{{this.paper.title}}</span>
            <br><br>
            <span style="text-align: left; display: block; float: left">{{this.audiences}}</span>
            <span style="text-align: right; display: block;">{{this.paper.author}}</span>
            <br>
            <div class="topics">
                <topic v-for="topic in paper.topics"
                     v-on:listen="doing"
                    :key = "topic.id"
                    :id = "topic.id"
                    :question = "topic.question"
                    :type = "topic.type"
                    :status = "topic.status"
                    :answer = "topic.answer"
                    :answerValueS = "topic.answerValueS"
                    :answerValueT = "topic.answerValueT"
                    :answerExplain = "topic.answerExplain">
                </topic>
                <br><br>
                <span v-if="this.paper.status === 'finishS' ">批注：{{this.paper.postil}}</span>
                <br><br>
                <span v-if="this.paper.status === 'finishS' " style="text-align: center; display: block; font-size: 50px; color: red; text-decoration: underline; font-weight: bold;">&nbsp;{{this.paper.score}}分&nbsp;</span>
            </div>
            <el-button class="submit" v-on:click="show = true" size="large" type="success" :disabled="this.disabled">提交作业</el-button>
            <el-dialog title="提示" v-model="show" size="small" top="30%">
                <span>确定提交作业吗？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button v-on:click="show = false">取 消</el-button>
                    <el-button type="success" v-on:click="submit()">确 定</el-button>
                </span>
            </el-dialog>
        </div>  
    </div>
</template>

<script>
    import topic from '../../../components/topic'
    export default {
        components: {
            topic
        },
        created: function() {
            var url
            if(this.$route.params.mark == -1) {
                url = '/api/student/workDoingS'
            }
            else if(this.$route.params.mark == 0 ) {
                url = '/api/student/workDoneS'
            }
            else if(this.$route.params.mark == 1) {
                url = '/api/student/workFinishS'
            }
            this.$http({
                method: 'POST',
                url: url,
                headers: {
                    'Authorization': 'Bearer '+ localStorage.token
                },
                data: {
                    workId: this.$route.params.workId
                }
            }).then( response => {
                this.paper = response.data.data
                if(this.paper.status == "finishS") {
                    this.disabled = true
                }
            })
        },
        data: function() {
            return {
                paper: {},
                mark: 1,
                disabled: false,
                show: false
            }
        },
        computed: {
            audiences: function() {               
                if(this.paper.audiences) {     
                    var audiences = ''           
                    for (var i=0; i < this.paper.audiences.length; i++){
                        audiences = audiences + ' ' + this.paper.audiences[i]
                    }
                    return audiences
                }            
            }
        },
        methods: {
            submit: function() {
                this.show = false
                this.$http({
                    method: 'POST',
                    url: '/api/student/submitWorkS',
                    data: {
                        token: localStorage.token,
                        workDoingS: this.paper
                    }
                }).then( response => {
                    if(response.data.errno == 200) {
                        this.$notify({
                            title: '提交作业成功！',
                            type: 'success',
                            offset: 100
                        })
                        this.$router.back()
                    } 
                    else {
                        this.$notify({
                            title: '未知错误！',
                            type: 'success',
                            offset: 100
                        })
                    }               
                })
            },
            doing: function(now,id) {
                this.paper.topics[id-1].answerValueS = now;
            }
        }
    }
</script>

<style scoped>
    .paper{
        width: 800px;
        margin: 0 auto;       
        position: relative;
        top: 50px;
    }
    .topics{  
        text-align: left;
        border: 1px solid #D3DCE6;
        padding: 50px;
    }
    .submit{
        margin: 30px;
        width: 200px;
        height: 50px;
    }
</style>